<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>看懂梧桐树</title>
    <include file="./themes/default/portal/cssH.html"/>

    <style>
        .banner {
            display: block;
            width: 100%;
            height: auto;
        }

        .buttom {
            height: 40px;
            line-height: 40px;
            width: 190px;
            color: #fff;
            border-radius: 20px;
            background: #6884E3;
            margin-top: 47px;
            margin-bottom: 47px;
        }

        .leftP {
            right: 0;
            top: 0;
        }

        .c9 {
            color: #999;
        }

        .c3 {
            color: #333;
        }

        .c6 {
            color: #666;
        }

        .borderLeft {
            height: 4px;
            width: 30px;
            background: #6884E3;
            border-radius: 4px;
            margin-top: 8px;
            margin-bottom: 31px;
        }

        /*.nav {*/
        /*  margin-bottom: 70px !important;*/
        /*}*/

        .title {
            padding-top: 10px;
            padding-bottom: 32px;
        }

        .make {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: transparent;
            background-color: transparent;
        }


        .make_bottom {
            width: 93px;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
        }

        .case > div img {
            width: 100%;
            height: auto;
        }

        .case > div:nth-child(2) {
            margin-left: 24px;
            margin-right: 24px;
        }

        .companyTitle {
            height: 80px;
            background-color: #6884E3;
            line-height: 80px;
            margin-bottom: 15px;
            color: #fff;
        }

        .padd {
            padding: 11px 21px;
        }

        .pad {
            padding: 15px 0;
        }

        .qrcode {
            margin: 15px 0;
        }

        @media screen and (min-width: 950px) {
            .f1n {
                font-size: 18px;
            }

            .company {
                width: 280px;
                margin-right: 48px;
                background-color: #f7f7f7;
            }

            .company img {
                width: 150px;
                height: auto;
            }

            .list {
                display: flex;
            }

            .list > div {
                height: 50px;
                line-height: 50px;
                display: flex;
            }

            .list > div:nth-child(2) {
                margin-left: 75px;
                margin-right: 75px;
            }

            .box > div {
                width: 33.333%;
                display: inline-block;
                margin-top: 40px;
            }

            .make:hover .make_bottom {
                border: 1px solid #fff;
            }

            .make:hover {
                color: #fff;
                background-color: rgba(0, 0, 0, 0.3);
            }

            .xtx > div {
                width: 33.333%;
                display: inline-block;
            }
        }

        @media screen and (max-width: 950px) {
            .f1n {
                font-size: 14px;
            }

            .xtx > div {
                width: 100%;
                display: inline-block;
                margin-bottom: 20px;
            }

            .company {
                width: 100%;
                background-color: #f7f7f7;
            }

            .company img {
                width: 80px;
                height: auto;
            }

            .list > div {
                height: 50px;
                line-height: 50px;
            }

            .box > div {
                width: 100%;
                display: inline-block;
                margin-top: 40px;
            }
        }

        .list > div {
            border-bottom: 1px solid #ccc;
            box-sizing: border-box;
            padding: 0 15px;
            margin-bottom: 25px;
        }

        .list img {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }

        .list input {
            width: 100%;
            border: none;
        }


        .borderLeft {
            height: 4px;
            width: 30px;
            background: #6884E3;
            border-radius: 4px;
            margin-top: 8px;
            margin-bottom: 31px;
        }

        .bottom {
            width: 110px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-image: url("/static/demo/img/b0.png");
            background-size: cover;
            background-repeat: no-repeat;
        }

        .msg {
            color: #f00;
            font-size: 14px;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 30px;
        }

        .imgLi {
            width: 15px;
            height: 15px;
            margin-right: 3px;
        }

        .navs {
            margin-top: 20px;
            margin-bottom: 70px;
        }

        .border {
            height: 1px;
            background: #ccc;
            width: 100%;
            margin-top: 10px;
        }

        .border > div {
            top: 0;
            right: 0;
            height: 1px;
            width: 150px;
            background: #6884E3;
        }

    </style>
</head>
<body>
<div id="web">
    <include file="./themes/default/portal/phone.html"/>

    <div id="app">
        <include file="./themes/default/portal/header.html"/>

        <div>
            <img class="banner" src="/static/demo/img/cover8.png" alt="">

            <!--  面包屑导航 list除当前页的所有名字和name       page当前页的名字  -->
            <div class="navs">
                <div>
                    <div class="flex">
                        <!--    从哪些页进来的    -->
                        <div>
                            <div class="flex flex-align">
                                <img class="imgLi" src="/static/demo/img/d1.png" alt="">
                                <div class="f1n" @click="navigatorFun(0)">首页&nbsp;<i class="el-icon-arrow-right"></i>&nbsp;
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="flex flex-align">
                                <img class="imgLi" src="/static/demo/img/d1.png" alt="">
                                <div class="f1n" @click="navigatorFun(3)">看懂梧桐树&nbsp;<i class="el-icon-arrow-right"></i>&nbsp;
                                </div>
                            </div>
                        </div>
                        <!--   在当前页的标题    -->
                        <div>
                            <div class="flex flex-align">
                                <img class="imgLi" src="/static/demo/img/d2.png" alt="">
                                <div class="f1n">{{page}}</div>
                            </div>
                        </div>
                    </div>
                    <!--   下边框   -->
                    <div class="border pr">
                        <div class="pa"></div>
                    </div>
                </div>
            </div>


            <div class="flex">
                <!--   侧边公司信息   -->
                <div class="company">
                    <div class="f24 companyTitle tc">{{caseDetail.title}}</div>
                    <div class="f14 c6 padd"><span class="c9">服务领域</span>&nbsp;&nbsp;&nbsp;{{caseDetail.service_area}}
                    </div>
                    <div class="f14 c6 padd"><span class="c9">产品类型</span>&nbsp;&nbsp;&nbsp;{{caseDetail.product_type}}
                    </div>
                    <div class="c9 f16 padd">{{caseDetail.desc}}</div>
                    <div class="flex flex-align flex-center qrcode"><img :src="caseDetail.qr" alt=""></div>
                    <div class="f14 c6 tc">手机可扫描二维码访问</div>
                </div>
                <!--   公司产品展示   -->
                <div class="flex-sub">
                    <h3 class="f20 fb c3 pad">企业现状</h3>
                    <div class="f16 c6 pad">{{caseDetail.enterprises}}</div>
                    <h3 class="f20 fb c3 pad">企业痛点</h3>
                    <div class="f16 c6 pad">{{caseDetail.spot}}</div>
                    <h3 class="f20 fb c3 pad">解决方案</h3>
                    <div class="f16 c6 pad">{{caseDetail.programme}}</div>
                    <h3 class="f20 fb c3 pad">使用成果</h3>
                    <div class="f16 c6 pad">{{caseDetail.achievements}}</div>
                    <div style="height: 100px"></div>
                    <div class="" v-html="caseDetail.content">
<!--                        &lt;!&ndash;                  xtx      <div class="tc" :key="index" v-for="(item,index) in caseDetail.caseList"><img :src="item"&ndash;&gt;-->
<!--                        alt="">-->

                    </div>
                </div>
            </div>
        </div>

        <div style="height: 42px"></div>

        <!--   相关案例  -->
        <div>
            <div class="tc f28">
                相关案例
                <div class="flex flex-align">
                    <div class="borderLeft" style="margin-bottom: 10px"></div>
                </div>
            </div>
        </div>

        <div style="height: 32px"></div>

        <div class="case flex">
            <div class="flex-sub pr" :key="index" v-for="(item,index) in imgs">
                <img :src="item.image" alt="">
                <div class="pa make flex flex-align flex-center">
                    <div>
                        <div class="f20 tc">{{item.title}}</div>
                        <div class="f16 tc title">{{item.service_area}}</div>
                        <div class="flex flex-align">
                            <div class="make_bottom tc f14" @click="goPage(5,item)">查看项目</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div style="height: 32px"></div>
        <!--   联系我们  -->
        <div>
            <div>
                <div class="tc f28">
                    联系我们
                    <div class="flex flex-align">
                        <div class="borderLeft" style="margin-bottom: 10px"></div>
                    </div>
                </div>
                <div style="height: 32px"></div>
                <div class="list">
                    <div class="flex-sub flex-align">
                        <img src="__STATIC__/demo/img/mys.png" alt="">
                        <input class="f14"
                                                                                                          type="text"
                                                                                                          v-model="name"
                                                                                                          placeholder="请输入您的姓名"/>
                    </div>
                    <div class="flex-sub flex-align">
                        <img src="__STATIC__/demo/img/tels.png" alt="">
                        <input class="f14"
                                                                                                           type="text"
                                                                                                           v-model="phone"
                                                                                                           placeholder="请输入手机号/邮箱"/>
                    </div>
                    <div class="flex-sub flex-align"><img src="__STATIC__/demo/img/an.png" alt=""><input class="f14"
                                                                                                         type="text"
                                                                                                         v-model="code"
                                                                                                         placeholder="验证码">
                        <canvas id="canvas" style="height: 35px;width: 90px;border: 1px solid #ccc;"></canvas>
                    </div>
                </div>
                <div style="height: 32px" v-show="!msg"></div>
                <div class="msg" v-show="msg">{{msg}}</div>

                <div class="flex flex-center flex-align">
                    <div class="tc f14 bottom" @click="contact()">立即联系</div>
                </div>
            </div>

        </div>
        <div style="height: 60px"></div>
    </div>


</div>
<!--  尾  -->
<include file="./themes/default/portal/footer.html"/>
<input type="hidden" name="caseList" value='{$json}' id="caseList">
<input type="hidden" name="caseDetail" value='{$info}' id="info">

<script>
    var app = new Vue({
        el: '#web',
        data: {
            show: false,
            navIndex: 2,
            navList: [{title: '网站首页', name: 'main', nav: []}, {title: '看见梧桐树', name: 'see', nav: []}, {
                title: '看清梧桐树',
                name: 'clearly',
                nav: []
            }, {title: '看懂梧桐树', name: 'caseList', nav: []}, {title: '凤栖梧桐', name: 'contact', nav: []}],
            navLists: [
                {title: '网站首页', name: 'main', nav: []},
                {title: '看见梧桐树', name: 'see', nav: ['企业简介', '关于我们']},
                {title: '看清梧桐树', name: 'clearly', nav: ['新闻资讯']},
                {title: '看懂梧桐树', name: 'caseList', nav: ['小程序开发', '公众号开发', 'APP开发', '品牌网站']},
                {title: '凤栖梧桐', name: 'contact', nav: ['品牌网站']}],

            // 手机端导航列表
            navList1: [
                {
                    img: '/static/demo/img/nav7.png',
                    title: '小程序开发',
                    name: 'program'
                },
                {
                    img: '/static/demo/img/nav4.png',
                    title: 'APP开发',
                    name: 'development'
                },
                {
                    img: '/static/demo/img/nav6.png',
                    title: '公众号开发',
                    name: 'publicNumber'
                },
                {
                    img: '/static/demo/img/nav5.png',
                    title: 'PC/WAP建站',
                    name: 'build'
                }
            ],
            list: [
                {
                    title: '专业产品研发团队',
                    img: '/static/demo/img/nav14.png',
                    desc: '销售、产品经理、UI设计、前端开发 后端开发、测试分工明确，一对一沟 通，减少沟通误差。'
                },
                {
                    title: '原生开发',
                    img: '/static/demo/img/nav15.png',
                    desc: '原生开发，为客户量身打造最优产品，满足客户高端定制要求。'
                },
                {
                    title: '软件著作权保护',
                    img: '/static/demo/img/nav16.png',
                    desc: '客户享有软件著作权，避免后期技术纠纷，最大程度保护客户利益。 '
                },
            ],

            caseDetail: {},
            imgs: [],
            page: '',
            msg: '',
            name: '',
            text: '',
            phone: '',
            code: '',
        },
        mounted: function () {

        },
        created: function () {
            this.page = this.getUrlParam('name')
            var caseList = document.getElementById('caseList').value;
            var info = document.getElementById('info').value;
            var caseLists = JSON.parse(caseList);
            console.log(caseLists)
            console.log(info)
            this.caseDetail = JSON.parse(info).caseList
            this.caseDetail.content = this.caseDetail.content ? this.caseDetail.content.replace(/\s(src=")/g, ' src="http://www.wutongshuit.com/') : ''
            console.log(this.caseDetail)
            this.imgs = caseLists;
        },
        methods: {
            getUrlParam: function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return decodeURI(r[2]);
                return null;
            },
            goPage: function (index, item) {
                switch (index) {
                    case 0:
                        window.location.href = "{:url('index/program')}"
                        break
                    case 1:
                        window.location.href = "{:url('index/development')}"
                        break
                    case 2:
                        window.location.href = "{:url('index/publicNumber')}"
                        break
                    case 3:
                        window.location.href = "{:url('index/build')}"
                        break
                    case 5:
                        if (item.url) {
                            console.log(item)
                            window.location.href = item.url
                            return
                        }
                        window.location.href = "{:url('index/caseDetail')}?id=" + item.id + "&name=" + item.title
                        break
                }
            },
//      导航的跳转
            navigatorFun: function (index) {
                switch (index) {
                    case 0:
                        window.location.href = "{:url('index/index')}"
                        break
                    case 1:
                        window.location.href = "{:url('index/see')}"
                        break
                    case 2:
                        window.location.href = "{:url('index/clearly')}"
                        break
                    case 3:
                        window.location.href = "{:url('index/caseList')}"
                        break
                    case 4:
                        window.location.href = "{:url('index/contact')}"
                        break
                }
            },
            contact: function () {
                var _this = this
                var reg = /^1[5||4||3||6|7||8||9][0-9]{9}$/
                var ref = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                if (!_this.name || _this.name.length > 30) {
                    _this.msg = '请确认您的姓名是否填写（或长度超出30个字符）！'
                    return false;

                }
                if (!reg.test(_this.phone) && !ref.test(_this.phone)) {
                    _this.msg = '请确认您的邮箱（或手机号）是否填写（或填写的是否正确）！'
                    return false;

                }
                if (!_this.code) {
                    _this.msg = '请填写验证码！'
                    return false;
                }

                var codes = _this.code.toLowerCase()
                var texts = _this.text.toLowerCase()
                if (codes != texts) {
                    _this.msg = '验证码有误！'
                    var can = document.getElementById('canvas')
                    draw([], can, function (txt) {
                        for (item of txt) {
                            app.text += item
                            console.log(app.text)
                        }
                    })
                    return false;
                }
                $.post("{:url('Index/postContact')}", {
                    user_name: _this.name,
                    str: _this.phone,
                }, function (data) {
                    var res = JSON.parse(data);
                    if (res.code == 1) {
                        layer.msg('留言成功', function () {
                            window.location.href = "{:url('Index/index')}";
                        });
                    } else {
                        layer.msg('网络错误');
                    }
                })
            }
        }
    })
    window.onload = function () {
        var can = document.getElementById('canvas')
        draw([], can, function (txt) {
            for (item of txt) {
                app.text += item
                console.log(app.text)
            }
        })
        can.onclick = function () {
            draw([], can, function (txt) {
                for (item of txt) {
                    app.text += item
                    console.log(app.text)
                }
            })
        }
    }
</script>
</html>